<template>
  <div>
    <el-descriptions class="custom-descriptions" title="个人信息" column="3" border>
      <span slot="title"><i class="el-icon-edit-outline"></i>个人信息</span>
      <template slot="extra">
        <el-button @click="openDialog">修改密码</el-button>
        <el-button type="primary" @click="openEditDialog">编辑</el-button>  <!-- 编辑按钮 -->
      </template>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          用户名
        </template>
        {{ this.loginModel ? user.uname : '管理员' }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-mobile-phone"></i>
          手机号
        </template>
        {{ this.loginModel ? user.phone : ' ' }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-suitcase"></i>
          职业
        </template>
        {{ this.loginModel ? user.profession : ' ' }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-search"></i>
          查询功能
        </template>
        <el-tag size="small" :type="this.tag.color">{{ this.tag.text }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-medal"></i>
          已找回的物品数
        </template>
        114514
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-office-building"></i>
          联系地址
        </template>
        {{ this.loginModel ? user.address : ' ' }}
      </el-descriptions-item>
    </el-descriptions>

    <!-- 编辑用户信息对话框 -->
    <el-dialog
      title="编辑个人信息"
      :visible.sync="editDialogVisible"
      width="30%"
      >
      <el-form :model="form">
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="form.uname" placeholder="请输入用户名" maxlength="50"></el-input>
        </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth">
          <el-input v-model="form.phone" placeholder="请输入手机号" maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="职业" :label-width="formLabelWidth">
          <el-input v-model="form.profession" placeholder="请输入职业" maxlength="50"></el-input>
        </el-form-item>
        <el-form-item label="联系地址" :label-width="formLabelWidth">
          <el-input v-model="form.address" placeholder="请输入联系地址" maxlength="100"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitEdit">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 修改密码对话框 -->
    <el-dialog
      title="修改密码"
      :visible.sync="dialogVisible"
      width="30%"
      @close="resetForm">
      <el-form :model="form">
        <el-form-item label="原密码" :label-width="formLabelWidth">
          <el-input
            type="password"
            v-model="form.oldPassword"
            placeholder="请输入原密码"
            autocomplete="off"
            maxlength="20">
          </el-input>
        </el-form-item>
        <el-form-item label="新密码" :label-width="formLabelWidth">
          <el-input
            type="password"
            v-model="form.newPassword"
            placeholder="请输入新密码"
            autocomplete="off"
            maxlength="20">
          </el-input>
        </el-form-item>
        <el-form-item label="确认密码" :label-width="formLabelWidth">
          <el-input
            type="password"
            v-model="form.confirmPassword"
            placeholder="请确认新密码"
            autocomplete="off"
            maxlength="20">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitPasswordChange">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {
      dialogVisible: false, // 控制修改密码对话框显示/隐藏
      editDialogVisible: false, // 控制编辑用户信息对话框显示/隐藏
      form: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: '',
        uname: '',
        phone: '',
        profession: '',
        address: ''
      },
      formLabelWidth: '80px',
      user: null,  // 用户信息
      jobNum: this.$store.getters.getJobNum,
      loginModel: this.$store.getters.getLoginModel,
      tag:{
        color:'',
        text:''
      }
    };
  },
  methods: {
    // 打开修改密码对话框
    openDialog() {
      this.dialogVisible = true;
    },
    // 打开编辑用户信息对话框
    openEditDialog() {
      this.editDialogVisible = true;
      // 加载用户信息到表单
      this.form.uname = this.user.uname;
      this.form.phone = this.user.phone;
      this.form.profession = this.user.profession;
      this.form.address = this.user.address;
    },

    // 提交修改密码
    submitPasswordChange() {
      if (this.form.newPassword !== this.form.confirmPassword) {
        this.$message.error('新密码与确认密码不一致！');
        return;
      }
      // 假设提交修改密码的逻辑
      console.log('修改密码', this.form);

      axios.post(`/api/user/changePassword/${this.user.jobNum}`, null, {
        params: {
          oldPassword: this.form.oldPassword,
          newPassword: this.form.newPassword,
        }
      })
        .then((response) => {
          this.$message.success('密码修改成功！');
          this.dialogVisible = false; // 关闭对话框
          this.resetForm(); // 重置表单
        })
        .catch((error) => {
          console.error(error);
          this.$message.error('密码修改失败');
        });

      
    },

    // 提交编辑用户信息
    submitEdit() {
      if (!this.form.uname || !this.form.phone || !this.form.profession || !this.form.address) {
        this.$message.error('所有字段都必须填写！');
        return;
      }
      console.log(this.form.address);
      // 假设提交用户信息修改的逻辑
      axios.put(`/api/user/update/${this.user.jobNum}`, null, {
        params: {
          uname: this.form.uname,
          phone: this.form.phone,
          address: this.form.address,
          profession: this.form.profession,
        }
      })
        .then((response) => {
          this.message('用户信息更新成功');
          this.fetchData(); // 重新加载数据
          this.editDialogVisible = false; // 关闭对话框
        })
        .catch((error) => {
          console.error(error);
          this.$message.error('更新失败');
        });
    },
    message(text){
      this.$message.success(text);
    },

    // 重置密码表单
    resetForm() {
      this.form.oldPassword = '';
      this.form.newPassword = '';
      this.form.confirmPassword = '';
    },

    // 加载用户数据
    fetchData() {
      axios.get(`/api/user/jobNum/${this.jobNum}`)
        .then((response) => {
          this.user = response.data;
          if(this.user.search){
            this.tag.color='';
            this.tag.text='启用';
          }else{
            this.tag.color='danger';
            this.tag.text='禁用';
          }
          this.$message.success('加载成功！');
        })
        .catch((error) => {
          console.error(error);
          this.$message.error('加载失败！');
        });
    }
  },
  mounted() {
    this.fetchData(); // 组件加载时获取初始数据
  },
};
</script>

<style scoped>
/* 自定义 el-descriptions 样式 */
.custom-descriptions {
  font-size: 25px; /* 设置字体大小 */
  margin-top: 30px; /* 设置与上方元素的间距 */
  padding: 20px; /* 设置内边距 */
}
</style>
